import React, { Component } from 'react'
import Film from '../film/Film'
import Cineam from '../cineam/Cineam'
import Center from '../center/Center'
import '../css/footer.css'

export default class footer extends Component {
    state = {
        list: [{
            id: 1,
            text: '电影'
        },
        {
            id: 2,
            text: '影院'
        },
        {
            id: 3,
            text: '我的'
        }],
        current: 0,
    }

    which() {
        switch (this.state.current) {
            case 0:
                return <Film></Film>;
            case 1:
                return <Cineam></Cineam>;
            case 2:
                return <Center></Center>;
            default: 
            return null
        }

    }
    render() {
        return (
            <div>
               {this.which()}
                <ul>
                    {this.state.list.map((item, index) =>
                        <li className={this.state.current === index ? 'active' : ''} key={item.id} onClick={() => this.handleClick(index)}>{item.text}</li>
                    )
                    }
                </ul>


            </div>
        )
    }

    handleClick(index) {
        this.setState({
            current: index
        })
    }
}



